<template>
    <view class="container">
        <view class="header">
            <epsoide-cmp
                class="epsoide-cmp"
                :index="classic.index"
            ></epsoide-cmp>
            <!-- v-bind动态绑定 -->
            <view class="like-container">
                <like
                    class="like"
                    :count="likeCount"
                    :like="likeStatus"
                    @like="onLike"
                ></like>
                <buttom class="share-btn">
                    <img
                        class="share"
                        src="../../../static/share@2x.png"
                        slot="img"
                        alt=""
                    />
                </buttom>
            </view>
        </view>
        <!-- 中间区域 -->
        <movie
            v-if="classic.type == 100"
            :img="classic.image"
            :content="classic.content"
        >
        </movie>
        <music
            v-if="classic.type == 200"
            :img="classic.image"
            :content="classic.content"
        >
        </music>
        <essay
            v-if="classic.type == 300"
            :img="classic.image"
            :content="classic.content"
        >
        </essay>
        <navi
            class="navi"
            :title="classic.title"
            :disLeft="disLeft"
            :disRight="disRight"
            @left="onLeft"
            @right="onRight"
        ></navi>
    </view>
</template>

<script>
// 引入api接口
import { getLatest, postLike, getRight, } from "@/api/classic.js";
//导入组件
import like from "@/components/like/like.vue";
import movie from "@/components/classic/movie/movie.vue";
import epsoide from '@/components/epsoide/epsoide.vue';
import navi from '@/components/navi/navi.vue';
import essay from '@/components/classic/essay/essay.vue';
import music from '@/components/classic/music/music.vue';
import buttom from '@/components/buttom/buttom.vue';
export default {
    //注册导入的那个组件
    components: {
        like,
        movie,
        'epsoide-cmp': epsoide,
        navi,
        essay,
        music,
        buttom
    },
    // 组建的初始数据
    data () {
        return {
            // 期刊数据
            classic: {},
            // 7期
            disLeft: true,
            // 1期
            disRight: false,
            likeCount: 0,
            likeStatus: false
        };
    },
    created () {
        // 创建这个组件
        this.getLatest();

    },
    watch: {
        // 期刊第一个和最后一个是否还可以点击
        'classic.index': {
            handler (newValue, oldValue) {
                if (this.classic.index != 7) {
                    this.disLeft = false
                } else {
                    this.disLeft = true
                }
                if (this.classic.index != 1) {
                    this.disRight = false
                } else {
                    this.disRight = true
                }
            }
        }
    },
    // 组件的方法列表
    methods: {
        //   获取最新一期
        getLatest () {
            //创建的getLatest方法.然后返回res的值
            getLatest().then((res) => {
                // 这个的classic等于res的数据
                this.classic = res.data;
            });
        },

        getLikeStatus () {

        },


        // 点赞或取消点赞
        onLike (val) {
            // 获取api的data数据
            const data = {
                // 期刊id等于这个classic文件的id
                _id: this.classic._id,
                // 点赞还是取消等于 val被点击几次
                status: val,
            };
            // 投出喜欢这个组件
            postLike(data);
        },
        // 点击左边
        onLeft () {
            let data = {
                // 期刊是classic的index值
                index: this.classic.index,
                // 点击切换当前一期的上一期
                type: 'previous',
            }
            getRight(data).then((res) => {
                this.classic = res.data;
            });
        },
        // 点击右边
        onRight () {
            let data = {
                // 期号是这个classi组件的index
                index: this.classic.index,
                // type点击切换当前一期的下一期
                type: 'next',

            }

            // getRight方法的数据然后返回res的值
            getRight(data).then((res) => {
                // 这个的classic等于res的数据
                this.classic = res.data;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 100rpx;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}
.epsoide-cmp {
    margin-left: 20rpx;
    margin-top: 4rpx;
}
.like {
    margin-top: 6rpx;
}
.navi {
    position: absolute;
    bottom: 40rpx;
}
.like-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-right: 30rpx;
}
.share-btn {
    margin-top: 28rpx;
    margin-left: 10rpx;
}
.share {
    width: 40rpx;
    height: 40rpx;
}
</style>
